<template>
    <div>
        <br />
        <div id="videoElement"
             style="width:98%;height:300px;background-color:#000000;margin:auto"></div>
        <br />
        <div style="text-align:center; margin:auto;">
            <input id="path1"
                   type="text"
                   value="http://192.168.100.14:8080/live/hello.m3u8"
                   placeholder="请输入视频地址，支持mp4/flv格式" />
            <button onclick="$this.playVideo1">播放</button>
            <br />
            <input id="path2"
                   type="text"
                   value="rtmp://192.168.100.14:1935/stream"
                   placeholder="请输入视频地址，支持rtmp直播" />
            <button onclick="$this.playVideo2">直播</button>
        </div>
        <div id="pp"
             class="button"
             onclick="ppVideo()">播放</div>

    </div>
</template>

<script>
  
    export default {
        data () {
            return {
                bstart: false,
                pusher: null
            }
        },
        created () {
            document.addEventListener('plusready', this.plusReady, false);
        },
        methods: {
            plusReady () {
                // 创建视频播放控件
                video = new plus.video.VideoPlayer('video', {
                    src: 'http://192.168.100.14:8080/live/hello.m3u8'
                });
                video.addEventListener('play', function () {
                    updatePlaying(true);
                }, false);
                video.addEventListener('pause', function () {
                    updatePlaying(false);
                }, false);
            },
            // 播放
            playVideo1 () {
                var path = document.getElementById('path1').value;
                if (path && path.length > 0) {
                    video.setOptions({ src: path });
                    video.play();
                }
            }
            ,playVideo2 () {
                var path = document.getElementById('path2').value;
                if (path && path.length > 0) {
                    video.setOptions({ src: path });
                    video.play();
                }
            },
            // 更新为播放状态
            updatePlaying (play) {
                playing = play;
                document.getElementById('pp').innerText = playing ? '暂停' : '播放';
            },
            // 播放/暂停
            ppVideo () {
                playing ? video.pause() : video.play();
            }
        }
    }
</script>
<style scoped>
    input {
        width: 70%;
        font-size: 16px;
        padding: 0.2em 0.2em;
        border: 1px solid #00b100;
        -webkit-user-select: text;
    }
    button,
    .button {
        width: 20%;
        margin: 6px 0 6px 6px;
        font-size: 16px;
        color: #fff;
        background-color: #00cc00;
        border: 1px solid #00b100;
        padding: 0.2em 0em;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
